<template>
  <div>
    <el-table :data="prescriptionorders"
              ref="districtTable"
              :select-on-indeterminate="true"
              @select-all="selectAll"
              @selection-change="handleSelectionChange"
              border
              style="width: 100%">
      <el-table-column type="selection"
                       label="选择"
                       width="50"
                       align="center">
      </el-table-column>
      <el-table-column prop="num"
                       label="订单编号"
                       width="120"
                       align="center">
      </el-table-column>
      <el-table-column prop="prescription.num"
                       label="处方编号"
                       width="120"
                       align="center">
      </el-table-column>
      <el-table-column prop="prescription.name"
                       label="患者"
                       width="70"
                       align="center">
      </el-table-column>
      <el-table-column prop="prescription.department"
                       label="科室"
                       width="80"
                       align="center">
      </el-table-column>
      <el-table-column prop="prescription.doctor"
                       label="医生"
                       width="80"
                       align="center">
      </el-table-column>
      <el-table-column prop="price"
                       label="费用"
                       width="80"
                       align="center">
      </el-table-column>
      <el-table-column prop="status"
                       label="订单状态"
                       width="80"
                       align="center">
        <template slot-scope="{row: {status}}">
          <span v-if="+status === 1">待支付</span>
          <span v-if="+status === 2">已完成</span>
          <span v-if="+status === 3">已失效</span>
          <span v-if="+status != 1 && +status !=2 && +status != 3">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="prescription.status"
                       label="处方单状态"
                       width="100"
                       align="center">
        <template slot-scope="{row: {prescription}}">
          <span v-if="+prescription.status === 1">审核中</span>
          <span v-if="+prescription.status === 2">审核通过</span>
          <span v-if="+prescription.status === 3">审核未通过</span>
          <span v-if="+prescription.status != 1 && +prescription.status !=2 && +prescription.status != 3">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyway"
                       label="购药方式"
                       width="100"
                       align="center">
      </el-table-column>
      <el-table-column prop="medicinestatus"
                       label="发药状态"
                       width="100"
                       align="center">
        <template slot-scope="{row: {medicinestatus}}">
          <span v-if="+medicinestatus === 0">未核准发药</span>
          <span v-if="+medicinestatus === 1">已核准发药</span>
          <span v-if="+medicinestatus != 0 && +medicinestatus !=1">-</span>
        </template>
      </el-table-column>
      <el-table-column prop=""
                       label="操作"
                       width="220"
                       align="center">
        <template slot-scope="scope">
          <!-- scope里面记录了当前行的下标，数据 -->
          <el-button type="success"
                     @click="info(scope)"
                     size="mini">查看</el-button>
          <el-button type="warning"
                     @click="update(scope)"
                     size="mini">审核</el-button>
          <el-button type="danger"
                     @click="del(scope)"
                     size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="danger"
               id="delall"
               size="mini"
               @click="batchDelete(tableChecked)">批量删除</el-button>
    <!-- 编辑对话框 -->
    <el-dialog title="审核"
               :visible.sync="dialogVisible"
               width="50%"
               v-if="refresh"
               @close="close">
      <div>
        <!-- 在对话框中显示当前行的数据 
            接受数据的方法(有参数)不要写（）
        -->
        <Edit :prescriptionOrder="prescriptionOrder"
              @change="change"
              @close="close"></Edit>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Edit from "./edit.vue";
export default {
  name: "PrescriptionOrderData",
  //接收父组件传递的数据
  props: {
    prescriptionorders: Array
  },
  components: {
    Edit
  },
  data () {
    return {
      isAllSelect: false,
      tableChecked: [],
      ids: [],
      dialogVisible: false,
      prescriptionOrder: null,
      index: null,
      refresh: false //刷新
    }
  },
  methods: {
    info: function (scope) {
      this.$router.push('/index/prescriptionOrderDetail');
      window.sessionStorage.setItem("prescriptionOrder", JSON.stringify(scope.row));
      window.sessionStorage.setItem("prescription", JSON.stringify(scope.row.prescription));
    },
    update: function (scope) {
      if (scope.row.prescription.status === 2) {
        //记录修改数据的下标
        this.index = scope.$index;
        //将选中的行的值设置为当前用户
        this.prescriptionOrder = scope.row;  //row是当前行的数据
        //创建对话框
        this.refresh = true;
        //显示对话框
        this.dialogVisible = true;
      } else {
        this.$message.error("请先进性处方单审核再进行该操作！");
      }
    },
    //关闭对话框
    close: function () {
      this.dialogVisible = false;
      this.refresh = false;
    },
    //修改处方信息
    change: function (temp) {
      this.prescriptionOrder = temp;
      //发送请求修改后台数据：修改成功才修改前台
      this.$axios({
        method: "post",
        url: "/prescriptionOrder/updatePrescriptionOrder",
        data: this.prescriptionOrder
      }).then((res) => {
        this.$message.success("修改成功");
      });

      //因为修改的是数组中的数据，无法被vue识别到，就不会重新渲染页面
      // this.prescription = temp;
      //   //通过$set给数组指定下标赋值  $set会触发重新渲染数据
      this.$set(this.prescriptionorders, this.index, temp);
      this.dialogVisible = false;
      //销毁对话框
      this.refresh = false;
    },
    //单条删除
    del: function (scope) {
      this.prescriptionOrder = scope.row;

      this.$confirm('是否确认此操作？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //发送请求
        this.$axios({
          method: "post",
          url: "/prescriptionOrder/deletePrescriptionOrderById",
          params: {
            id: this.prescriptionOrder.id
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.data.message);
          }
          this.$emit("refresh");
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    //批量选择
    handleSelectionChange (val) {
      this.tableChecked = val;
    },
    //批量删除
    batchDelete (rows) {
      this.$confirm('是否确认此操作？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.forEach(element => {
          this.ids.push(element.id);
        });
        //发送请求
        this.$axios({
          method: "post",
          url: "/prescriptionOrder/deletePrescriptionOrderByIds",
          data: JSON.stringify(this.ids),
          dataType: 'json',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.data.message);
          }
          this.$emit("refresh");
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

      this.ids = [];
    },

    //全选
    selectAll (selection, first) {
      if (!first) {
        this.isAllSelect = !this.isAllSelect;
      }
      selection.map(el => {
        if (el.children) {
          el.children.map(j => {
            this.toggleSelection(j, this.isAllSelect);
          });
          if (el.children.length > 0) {
            this.selectAll(el.children, true);
          }
        }
      });
    },
    toggleSelection (row, select) {
      if (select) {
        this.$refs.districtTable.toggleRowSelection(row, select);
      } else {
        this.$refs.districtTable.clearSelection();
      }
    },
  }
}
</script>

<style scoped>
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
</style>
